/*
 * @Author: czy0729
 * @Date: 2024-01-20 09:42:02
 * @Last Modified by: czy0729
 * @Last Modified time: 2025-10-09 05:35:11
 */
import React from 'react'
import { Loading as LoadingComp } from '@components'
import { _, useStore } from '@stores'
import { useObserver } from '@utils/hooks'
import { COMPONENT } from './ds'

import type { Ctx } from '../../../types'
import type { Props } from './types'

function Loading({ subjectId }: Props) {
  const { $ } = useStore<Ctx>(COMPONENT)

  return useObserver(() => {
    const { progress } = $.state
    if (progress.fetchingSubjectId1 !== subjectId && progress.fetchingSubjectId2 !== subjectId)
      return null

    return <LoadingComp.Medium color={_.colorSub} size={16} />
  })
}

export default Loading
